<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/mecss.css">
    <link rel="stylesheet" href="../static/css/blog-background.css">
</head>

<body>
<!--导航-->
<div class="ui top menu">
    <nav class="h-shadow-small ui attached segment h-padded-td-mini">
        <!-- 滚轮进度条 -->
        <div class="ui bottom indicating attached  progress" data-value="1" data-total="100" id="example4">
            <div class="bar"></div>
        </div>
        <div class="ui secondary stackable menu ">
            <h2 class="ui left header item">
                <div class="content"><span style="font-size: 20px">Meteor</span></div>
            </h2>
            <div class="item  h-item h-moblile-hide">
                <div class="ui item  category search">
                    <div class="ui  icon input">
                        <input class="prompt" type="text" placeholder="搜索文章" id="Search_for_articles">
                        <i class="search link icon" id="search_blog_btn"></i>
                    </div>
                    <div class="results"></div>
                </div>
            </div>

            <a th:href="@{/1}" href="#" class="h-item item h-moblile-hide Navbtn" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>

            <a th:href="@{/types}" href="#" class="h-item item h-moblile-hide  Navbtn" th:classappend="${n==2} ? 'active'"><i class="tags icon"></i>标签</a>

            <a th:href="@{/time}" href="#" class="h-item item h-moblile-hide  Navbtn" th:classappend="${n==3} ? 'active'"><i
                    class="calendar alternate icon"></i>归档</a>

            <a href="javascript:alert('开发中')" class="h-item item h-moblile-hide Navbtn"><i
                    class="linkify icon" th:classappend="${n==4} ? 'active'"></i>未知</a>

            <a th:href="@{/aboutMe}" class="h-item item h-moblile-hide  Navbtn"><i
                    class="address card outline icon" th:classappend="${n==5} ? 'active'"></i>关于我</a>

            <a th:href="@{/dream}" class="h-item item h-moblile-hide  Navbtn"><i
                    class="paper plane outline icon" th:classappend="${n==6} ? 'active'"></i>关于梦想</a>

            <!--            <a th:href="@{/toLogin}" class="h-item item h-moblile-hide  Navbtn"><i class="arrow circle right icon"></i>后台登录</a>-->

        </div>
        <a href="#" class="ui icon button h-right-top-storage h-moblile-show" id="stackable-hide"
           style="background-color: #ffffff;">
            <i class="sidebar icon"></i>
        </a>
    </nav>
</div>
<!--中间内容-->
<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="eleven wide column">
                <div class="ui segment">
                    <div class="ui shape">
                        <div class="sides" id="fz">
                            <div class="active side"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><img th:src="@{/image/myself.jpg}" src="https://picsum.photos/800/600?image=1005" alt="" class="ui rounded image"></font></font></div>
                            <div class="side"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><img th:src="@{/image/img_4.png}" src="https://picsum.photos/800/600?image=1005" alt="" class="ui rounded image"></font></font></div>
                            <div class="side"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><img th:src="@{/image/img_2.png}" src="https://picsum.photos/800/600?image=1005" alt="" class="ui rounded image"></font></font></div>
                            <div class="side"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><img th:src="@{/image/img_3.png}" src="https://picsum.photos/800/600?image=1005" alt="" class="ui rounded image"></font></font></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="five wide column">
                <div class="ui top attached segment">
                    <div class="ui header">关于我</div>
                </div>
                <div class="ui attached segment">
                    <p class="m-text">热爱生活、热爱编程、努力上进</p>
                    <p class="m-text">一个从小白开始奋斗的退役有志青年。</p>
                    <p class="m-text">如果此时你正在阅读这段话，我相信你一定也是努力上进、想好好学习的人，你也一定知道学习是个枯燥无味的事情。
                    唯有努力与坚持！</p>
                    <p class="m-text">这个博客网站制作并不难，若努力，皆可成。  </p>
                    <p><---图片可点击</p>
                </div>
                <div class="ui attached segment">
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">编程</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">写作</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">运动</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">健身</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">跑步</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">Make Money</div>
                </div>
                <div class="ui attached segment">
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">正直</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">努力优秀</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">掌握Java</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">自律</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">积极上进</div>
                </div>
                <div class="ui bottom attached segment">
                    <a href="https://www.cnblogs.com/lx-meteor" class="ui circular icon button"><i class="github icon"></i></a>
                    <a href="#" class="ui weixin circular icon button"><i class="weixin icon"></i></a>
                    <a href="#" class="ui qq circular icon button" data-content="1762204162"><i
                            class="qq icon"></i></a>
                </div>
                <div class="ui weixin flowing popup transition hidden">
                    <img th:src="@{/image/myvx.jpg}" src="../static/image/myvx.jpg" alt="" class="ui rounded image" style="width:100px">
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<br>

<!-- 底部 -->
<footer th:replace="_fragments :: footer" class="ui inverted attached segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/image/myvx.jpg" class="ui rounded image" alt="" style="width:100px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2022 By Meteor</p>
        <a href="https://beian.miit.gov.cn"><p>黑ICP备2022004739号-1</p></a>
    </div>
</footer>

<th:block th:replace="_fragments :: script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</th:block>

<script>
    $(".menu.toggle").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    });
    $(".qq").popup({});
    $(".weixin").popup({
        popup: $(".weixin.popup"),
        position: 'bottom center',
    });
    $("#fz").click(function () {
        $('.shape')
            .shape('set next side', '.second.side','.third.side','.fourth.side')
            .shape('flip right')
        ;
    });
</script>
</body>

</html>